<template>
    <view>
        <canvas
            v-if="id"
            class="canvas-hide"
            :style="[
                {
                    width: width + 'px',
                    height: height + 'px'
                }
            ]"
            :canvas-id="id"
            :id="id"
        ></canvas>
    </view>
</template>

<script>
import $canvas from '@/common/js/canvas.js';
export default {
    data() {
        return {};
    },
    props: {
        id: {
            type: String,
        },
        width: {
            type: [String, Number],
            default: 600
        },
        height: {
            type: [String, Number],
            default: 900
        },
        avaUrl: {
            type: [String, Number],
            default: '/static/ad/st14.png'
        },
        goodsUrl: {
            type: String,
            default: '/static/ad/st14.png'
        },
        
    },
    methods: {
        // 模式一
        async init() {
            //图片处理
            const avaUrl = await $canvas.getImg(this.avaUrl);
            const goodsUrl = await $canvas.getImg(this.goodsUrl);
            const btnUrl = await $canvas.getImg('/static/qrcode/btn.png');
            const qrcodeboxUrl = await $canvas.getImg('/static/qrcode/codebox.png');
            const qrcodeUrl = await $canvas.getImg('/static/qrcode/code1.png');
            const starUrl = await $canvas.getImg('/static/qrcode/icon_star.png');
            const starUrl2 = await $canvas.getImg('/static/qrcode/icon_star2.png');
            const addUrl = await $canvas.getImg('/static/qrcode/icon_add.png');
            const telUrl = await $canvas.getImg('/static/qrcode/icon_tel.png');
            const ctx = uni.createCanvasContext(this.id, this);
            const addMaxText = 14;
            const avawidth = 50;
            const left = 30;
            let top = 0;
            const imgHeight = 400;
            const imgWidth = this.width - left * 2;
            const btnWidth = 165;
            const btnHeight = 75;
            const qrcodeWidth = 100;
            const username = '一 只兔子';
            const starNum = 4;
            const starWidth = 20;
            const iconWidth = 26;
            let addText = '广东省珠海市香洲区海洋公园鲸鲨馆旁';
            let addText2 = '';
            if (addText.length > addMaxText) {
                addText2 = addText.substr(addMaxText, addText.length);
                addText = addText.substr(0, addMaxText);
            }
            $canvas.drawRoundRect(ctx, 0, 0, this.width, this.height, 20, () => {
                ctx.fillStyle = '#fff';
                ctx.fillRect(0, 0, this.width, this.height);
            });
            //头部
            let headtopLeft = left + 10;
            let headtopTop = 25;
            $canvas.circleImg(ctx, avaUrl.path, headtopLeft, headtopTop, avawidth / 2);
            ctx.font = '22px STheiti';
            ctx.setTextBaseline('top');
            ctx.textAlign = 'left';
            ctx.fillStyle = '#333';
            let nameTextWidth = ctx.measureText(username).width;
            headtopLeft += avawidth + 10;
            headtopTop += 15;
            ctx.fillText(username, headtopLeft, headtopTop);
            headtopLeft += nameTextWidth + 4;
            ctx.beginPath();
            ctx.font = '22px STheiti';
            ctx.setTextBaseline('top');
            ctx.fillStyle = '#666';
            ctx.fillText('推荐了一款美食,尝尝吧~', headtopLeft, headtopTop);
            //商品图
            let bgheight = 120;
            top += 100 + imgHeight - bgheight;
            $canvas.drawRoundRect(ctx, left, 100, imgWidth, imgHeight, 10, () => {
                ctx.drawImage(goodsUrl.path, left, 100, imgWidth, imgHeight);
                ctx.fillStyle = 'rgba(0,0,0,0.2)';
                ctx.fillRect(left, top, imgWidth, bgheight);
            });
            top += 30;
            ctx.font = '30px STheiti';
            ctx.setTextBaseline('top');
            ctx.fillStyle = '#fff';
            ctx.fillText('单人招牌麻辣小龙虾', 2 * left, top);
            top += 50;
            ctx.font = '20px STheiti';
            ctx.setTextBaseline('top');
            ctx.fillStyle = '#fff';
            ctx.fillText('随时退 免预约', 2 * left, top);
            //抢购
            top += 70;
            ctx.drawImage(btnUrl.path, this.width - left - btnWidth, top, btnWidth, btnHeight);
            top += 30;
            ctx.beginPath();
            ctx.font = '20px STheiti';
            ctx.setTextBaseline('top');
            ctx.fillStyle = '#f5413d';
            let symbolTextWidth = ctx.measureText('￥').width;
            ctx.fillText('￥', 2 * left, top);
            ctx.font = '34px STheiti';
            top -= 8;
            ctx.fillText('88', 2 * left + symbolTextWidth, top);
            symbolTextWidth += ctx.measureText('88').width;
            ctx.beginPath();
            ctx.font = '20px STheiti';
            ctx.fillStyle = '#333';
            top += 8;
            ctx.fillText('起', 2 * left + symbolTextWidth, top);
            ctx.beginPath();
            top += 70;
            ctx.fillStyle = '#f0f0f0';
            ctx.fillRect(left, top, imgWidth, 2);
            //商家详情
            top += 30;
            ctx.beginPath();
            ctx.font = '32px STheiti';
            ctx.fillStyle = '#333';
            ctx.fillText('珠海华发喜来登酒店', left, top);
            ctx.drawImage(qrcodeboxUrl.path, this.width - left - 130, top, 130, 130);
            ctx.drawImage(qrcodeUrl.path, this.width - left - 130 + 15, top + 15, qrcodeWidth, qrcodeWidth);
            // 星星
            let starLeft = 30;
            let starList = [];
            top += 50;
            for (let i = 0; i < 5; i++) {
                let file = starNum >= i + 1 ? starUrl2 : starUrl;
                ctx.drawImage(file.path, starLeft, top, starWidth, starWidth);
                starLeft += starWidth + 5;
            }
            top += 4;
            ctx.font = '20px STheiti';
            let starNumTextWidth = ctx.measureText('4.0').width;
            ctx.fillStyle = '#666';
            ctx.fillText('4.0', starLeft, top);
            top -= 2;
            starLeft += starNumTextWidth + 10;
            ctx.beginPath();
            ctx.font = '24px STheiti';
            ctx.fillText('￥620/人', starLeft, top);
            top += 40;
            ctx.drawImage(addUrl.path, left, top, iconWidth, iconWidth);
            top += 4;
            ctx.beginPath();
            ctx.font = '22px STheiti';
            let iconTextLeft = left + iconWidth + 10;
            ctx.fillText(addText, iconTextLeft, top);
            if (addText2.length) {
                top += 30;
                ctx.fillText(addText2, iconTextLeft, top);
            }
            top += 38;
            ctx.drawImage(telUrl.path, left, top, iconWidth, iconWidth);
            top += 4;
            ctx.fillText(17877878, iconTextLeft, top);
            top -= 20;
            ctx.fillStyle = '#333';
            ctx.font = '20px STheiti';
            let qrText1Width = ctx.measureText('长按或扫描').width;
            ctx.fillText('长按或扫描', this.width - left - qrText1Width - (130 - qrText1Width) / 2, top);
            top += 30;
            qrText1Width = ctx.measureText('查看~').width;
            ctx.fillText('查看~', this.width - left - qrText1Width - (130 - qrText1Width) / 2, top);
            ctx.draw();
            setTimeout(() => {
                this.canTemp();
            }, 200);
        },
        //模式二
        async init2() {
            //图片处理
            const avaUrl = await $canvas.getImg(this.avaUrl);
            const goodsUrl = await $canvas.getImg(this.goodsUrl);
            const bgtopUrl = await $canvas.getImg('/static/qrcode/bgtop.png');
            const btnUrl = await $canvas.getImg('/static/qrcode/btn.png');
            const qrcodeboxUrl = await $canvas.getImg('/static/qrcode/codebox.png');
            const qrcodeUrl = await $canvas.getImg('/static/qrcode/code1.png');
            const starUrl = await $canvas.getImg('/static/qrcode/icon_star.png');
            const starUrl2 = await $canvas.getImg('/static/qrcode/icon_star2.png');
            const addUrl = await $canvas.getImg('/static/qrcode/icon_add.png');
            const telUrl = await $canvas.getImg('/static/qrcode/icon_tel.png');
            const ctx = uni.createCanvasContext(this.id, this);
            const bgtopHeight = 100;
            const addMaxText = 18;
            const avawidth = 50;
            const left = 30;
            let top = 0;
            const imgHeight = 190;
            const imgWidth = 190;

            const btnWidth = 165;
            const btnHeight = 75;
            const qrcodeWidth = 120;
            const username = '一 只兔子';
            const starNum = 4;
            const starWidth = 20;
            const iconWidth = 26;
            let sellerName = '珠海华发喜来登酒店';
            let addText = '广东省珠海市香洲区海洋公园鲸鲨馆旁';
            if (addText.length > addMaxText) {
                addText = addText.substr(0, addMaxText);
            }
            $canvas.drawRoundRect(ctx, 0, 0, this.width, this.height, 20, () => {
                ctx.fillStyle = '#fff';
                ctx.fillRect(0, 0, this.width, this.height);
                ctx.drawImage(bgtopUrl.path, 0, 0, this.width, bgtopHeight);
            });
            //头部
            let headtopLeft = left + 10;
            let headtopTop = 25;
            $canvas.circleImg(ctx, avaUrl.path, headtopLeft, headtopTop, avawidth / 2, 4);
            ctx.font = '22px STheiti';
            ctx.setTextBaseline('top');
            ctx.textAlign = 'left';
            ctx.fillStyle = '#fff';
            let nameTextWidth = ctx.measureText(username).width;
            headtopLeft += avawidth + 10;
            headtopTop += 15;
            ctx.fillText(username, headtopLeft, headtopTop);
            headtopLeft += nameTextWidth + 4;
            ctx.beginPath();
            ctx.font = '22px STheiti';
            ctx.setTextBaseline('top');
            ctx.fillStyle = '#eee';
            ctx.fillText('推荐了一款美食,尝尝吧~', headtopLeft, headtopTop);
            //商品图
            ctx.beginPath();
            ctx.fillStyle = '#f9f8f8';
            ctx.fillRect(0, bgtopHeight, this.width, 320);
            let bgheight = 120;
            let goodsLeft = left;
            top += bgtopHeight + 40;
            ctx.beginPath();
            $canvas.drawRoundRect(ctx, goodsLeft, top, imgWidth, imgHeight, 20, () => {
                ctx.drawImage(goodsUrl.path, goodsLeft, top, imgWidth, imgHeight);
            });
            // 文字
            top += 20;
            goodsLeft += imgWidth + 20;
            ctx.font = '30px STheiti';
            ctx.setTextBaseline('top');
            ctx.fillStyle = '#333';
            ctx.fillText('单人招牌麻辣小龙虾'.substring(0, 10), goodsLeft, top);
            top += 50;
            ctx.font = '20px STheiti';
            ctx.setTextBaseline('top');
            ctx.fillStyle = '#333';
            ctx.fillText('随时退 免预约', goodsLeft, top);
            top += 40;
            ctx.beginPath();
            ctx.font = '20px STheiti';
            ctx.setTextBaseline('top');
            ctx.fillStyle = '#f5413d';
            let symbolTextWidth = ctx.measureText('￥').width;
            ctx.fillText('￥', goodsLeft, top);
            ctx.font = '34px STheiti';
            top -= 8;
            ctx.fillText('88', goodsLeft + symbolTextWidth, top);
            symbolTextWidth += ctx.measureText('88').width;
            ctx.beginPath();
            ctx.font = '20px STheiti';
            ctx.fillStyle = '#333';
            top += 8;
            ctx.fillText('起', goodsLeft + symbolTextWidth, top);
            ctx.beginPath();
            top += 50;
            ctx.drawImage(btnUrl.path, goodsLeft, top, btnWidth, btnHeight);
            //商家详情
            top += 160;
            ctx.beginPath();
            ctx.font = '32px STheiti';
            let sellerNameWidth = $canvas.getTextWidth(ctx, sellerName, 32);
            ctx.fillStyle = '#333';
            ctx.measureText();
            ctx.fillText(sellerName, this.width / 2 - sellerNameWidth / 2, top);

            // 星星
            let starLineWidth = (starWidth + 5) * 5 + $canvas.getTextWidth(ctx, '4.0', 20) + $canvas.getTextWidth(ctx, '￥620/人', 24) + 10;
            let starLeft = this.width / 2 - starLineWidth / 2;
            let starList = [];
            console.log(starLineWidth);
            top += 60;
            for (let i = 0; i < 5; i++) {
                let file = starNum >= i + 1 ? starUrl2 : starUrl;
                ctx.drawImage(file.path, starLeft, top, starWidth, starWidth);
                starLeft += starWidth + 5;
            }
            top += 4;
            ctx.font = '20px STheiti';
            let starNumTextWidth = ctx.measureText('4.0').width;
            ctx.fillStyle = '#999';
            ctx.fillText('4.0', starLeft, top);
            top -= 2;
            starLeft += starNumTextWidth + 10;
            ctx.beginPath();
            ctx.font = '24px STheiti';
            ctx.fillStyle = '#666';
            ctx.fillText('￥620/人', starLeft, top);
            top += 42;
            ctx.beginPath();
            let addTextWidth = $canvas.getTextWidth(ctx, addText, 22);
            ctx.font = '22px STheiti';
            ctx.fillStyle = '#999';
            ctx.fillText(addText, this.width / 2 - addTextWidth / 2, top);
            top += 42;
            let telTextWidth = $canvas.getTextWidth(ctx, '17877878', 22);
            ctx.fillText('17877878', this.width / 2 - telTextWidth / 2, top);
            top += 42;
            ctx.drawImage(qrcodeboxUrl.path, this.width / 2 - 150 / 2, top, 150, 150);
            top += 15;
            ctx.drawImage(qrcodeUrl.path, this.width / 2 - qrcodeWidth / 2, top, qrcodeWidth, qrcodeWidth);
            top += qrcodeWidth + 30;
            let qrTextWidth = $canvas.getTextWidth(ctx, '长按或扫描查看~', 20);
            ctx.fillStyle = '#666';
            ctx.font = '20px STheiti';
            ctx.fillText('长按或扫描查看~', this.width / 2 - qrTextWidth / 2, top);
            ctx.draw();
            setTimeout(() => {
                this.canTemp();
            }, 200);
        },
        // 模式三
        async init3() {
            //图片处理
            const avaUrl = await $canvas.getImg(this.avaUrl);
            const goodsUrl = await $canvas.getImg(this.goodsUrl);
            const btnUrl = await $canvas.getImg('/static/qrcode/btn.png');
            const qrcodeboxUrl = await $canvas.getImg('/static/qrcode/codebox.png');
            const qrcodeUrl = await $canvas.getImg('/static/qrcode/code1.png');
            const starUrl = await $canvas.getImg('/static/qrcode/icon_star.png');
            const starUrl2 = await $canvas.getImg('/static/qrcode/icon_star2.png');
            const addUrl = await $canvas.getImg('/static/qrcode/icon_add.png');
            const telUrl = await $canvas.getImg('/static/qrcode/icon_tel.png');
            const ctx = uni.createCanvasContext(this.id, this);
            const addMaxText = 14;
            const avawidth = 50;
            const left = 30;
            let top = 0;
            const imgHeight = 530;

            const imgWidth = this.width;
            const btnWidth = 165;
            const btnHeight = 75;
            const qrcodeWidth = 100;
            const username = '一 只兔子';
            const starNum = 4;
            const starWidth = 20;
            const iconWidth = 26;
            let addText = '广东省珠海市香洲区海洋公园鲸鲨馆旁';
            let addText2 = '';
            if (addText.length > addMaxText) {
                addText2 = addText.substr(addMaxText, addText.length);
                addText = addText.substr(0, addMaxText);
            }
            $canvas.drawRoundRect(ctx, 0, 0, this.width, this.height, 20, () => {
                ctx.fillStyle = '#fff';
                ctx.fillRect(0, 0, this.width, this.height);
                ctx.drawImage(goodsUrl.path, 0, 0, imgWidth, imgHeight);
                ctx.fillStyle = 'rgba(0,0,0,0.1)';
                ctx.fillRect(left, top, imgWidth, imgHeight);
            });
            //头部
            let headtopLeft = left + 10;
            let headtopTop = 25;
            $canvas.circleImg(ctx, avaUrl.path, headtopLeft, headtopTop, avawidth / 2,4);
            ctx.font = '22px STheiti';
            ctx.setTextBaseline('top');
            ctx.textAlign = 'left';
            ctx.fillStyle = '#fff';
            let nameTextWidth = ctx.measureText(username).width;
            headtopLeft += avawidth + 10;
            headtopTop += 15;
            ctx.fillText(username, headtopLeft, headtopTop);
            headtopLeft += nameTextWidth + 4;
            ctx.beginPath();
            ctx.font = '22px STheiti';
            ctx.setTextBaseline('top');
            ctx.fillStyle = '#eee';
            ctx.fillText('推荐了一款美食,尝尝吧~', headtopLeft, headtopTop);
            //商品文字
            top += 220;
            ctx.font = '30px STheiti';
            ctx.setTextBaseline('top');
            ctx.fillStyle = '#fff';
            ctx.fillText('单人招牌麻辣小龙虾', left, top);
            top += 50;
            ctx.font = '20px STheiti';
            ctx.setTextBaseline('top');
            ctx.fillStyle = '#fff';
            ctx.fillText('随时退 免预约', left, top);
            top += 60;
            ctx.beginPath();
            ctx.font = '20px STheiti';
            ctx.setTextBaseline('top');
            ctx.fillStyle = '#fff';
            let symbolTextWidth = ctx.measureText('￥').width;
            ctx.fillText('￥', left, top);
            ctx.font = '34px STheiti';
            top -= 8;
            ctx.fillText('88', left + symbolTextWidth, top);
            symbolTextWidth += ctx.measureText('88').width;
            ctx.beginPath();
            ctx.font = '20px STheiti';
            ctx.fillStyle = '#fff';
            top += 8;
            ctx.fillText('起', left + symbolTextWidth + 5, top);
            ctx.beginPath();
            top+=40
             ctx.drawImage(btnUrl.path, left, top, btnWidth, btnHeight);
            //商家详情
            top += 220;
            ctx.beginPath();
            ctx.font = '32px STheiti';
            ctx.fillStyle = '#333';
            ctx.fillText('珠海华发喜来登酒店', left, top);
            ctx.drawImage(qrcodeboxUrl.path, this.width - left - 130, top, 130, 130);
            ctx.drawImage(qrcodeUrl.path, this.width - left - 130 + 15, top + 15, qrcodeWidth, qrcodeWidth);
            // 星星
            let starLeft = 30;
            let starList = [];
            top += 50;
            for (let i = 0; i < 5; i++) {
                let file = starNum >= i + 1 ? starUrl2 : starUrl;
                ctx.drawImage(file.path, starLeft, top, starWidth, starWidth);
                starLeft += starWidth + 5;
            }
            top += 4;
            ctx.font = '20px STheiti';
            let starNumTextWidth = ctx.measureText('4.0').width;
            ctx.fillStyle = '#666';
            ctx.fillText('4.0', starLeft, top);
            top -= 2;
            starLeft += starNumTextWidth + 10;
            ctx.beginPath();
            ctx.font = '24px STheiti';
            ctx.fillStyle = '#666';
            ctx.fillText('￥620/人', starLeft, top);
            top += 40;
            ctx.drawImage(addUrl.path, left, top, iconWidth, iconWidth);
            top += 4;
            ctx.beginPath();
            ctx.font = '22px STheiti';
            ctx.fillStyle = '#666';
            let iconTextLeft = left + iconWidth + 10;
            ctx.fillText(addText, iconTextLeft, top);
            if (addText2.length) {
                top += 30;
                ctx.fillText(addText2, iconTextLeft, top);
            }
            top += 38;
            ctx.drawImage(telUrl.path, left, top, iconWidth, iconWidth);
            top += 4;
            ctx.fillText(17877878, iconTextLeft, top);
            top -= 20;
            ctx.fillStyle = '#333';
            ctx.font = '20px STheiti';
            let qrText1Width = ctx.measureText('长按或扫描').width;
            ctx.fillText('长按或扫描', this.width - left - qrText1Width - (130 - qrText1Width) / 2, top);
            top += 30;
            qrText1Width = ctx.measureText('查看~').width;
            ctx.fillText('查看~', this.width - left - qrText1Width - (130 - qrText1Width) / 2, top);
            ctx.draw();
            setTimeout(() => {
                this.canTemp();
            }, 200);
        },

        async canTemp() {
            const [err, res] = await uni.canvasToTempFilePath(
                {
                    x: 0,
                    y: 0,
                    width: this.width,
                    height: this.height,
                    canvasId: this.id,
                },
                this
            );
            console.log(err, res);
            if (err) {
                this.$common.showTip(JSON.stringify(err));
                this.$emit('error', err);
            }
            if (res) {
                console.log('canvasToTempFilePath');
                // console.log(res.tempFilePath)
                this.$emit('success', res.tempFilePath);
            }
        }
    }
};
</script>

<style scoped lang="scss">
.canvas-hide{
    position: absolute;
    right: 200%;
    top: -200%;
    opacity: 0;
}
</style>
